<script>
export default {
  name: 'YiZhanComponent',
  data(){
    return{
      input1:'',
      input2:'',
      value1:'',
      yiZhan:{},

      addressAll: [],   //省市区
      address:[], //你选择的地址
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogFormVisibleBianJi1:false,
      detailAddress:'',

      form: {
        address:'',
        detailAddress:'',
        name: '',
        age:'',
        courierStationName:'',
        courierStationAddress:'',
        courierStationCommunityName:'',

      },
      formLabelWidth: '120px',

    }
  },
  created () {
    this.getAllProvinceAndCityList();

    this.axios.get("courierStation/querySearchCourierStationList",{
      params:{
        pageNum:1,
        pageSize:10,
        courierStationName:"",
        communityName:"",
        courierStationStatus:"",
        startTime:"",
        endTime:"",
      }
    }).then((res)=>{
      console.log(res);
      this.yiZhan = res.data.data;
    }).catch((err)=>{})
  },

  methods:{
    //搜索
    searchxiaoqu(){
      let startTime="";
      let endTime="";
      if (this.value1.length > 0){
        startTime = this.value1[0].getFullYear() + "-" +(this.value1[0].getMonth()+1).toLocaleString('en-US',{
          minimumIntegerDigits:2,useGrouping:false
        })+ "-" + this.value1[0].getDate().toLocaleString('en-US',{
          minimumIntegerDigits:2,useGrouping:false
        })+" 00:00:00";

        endTime = this.value1[1].getFullYear() + "-" +(this.value1[1].getMonth() +1).toLocaleString('en-US',{
          minimumIntegerDigits:2,useGrouping:false
        })+"-" +this.value1[1].getDate().toLocaleString('en-US',{
          minimumIntegerDigits:2,useGrouping:false
        })+" 00:00:00";
      };
      this.axios.get("courierStation/querySearchCourierStationList",{
        params:{
          pageNum:1,
          pageSize:10,
          courierStationName:this.input1,
          communityName:this.input2,
          courierStationStatus:"",
          startTime:startTime,
          endTime:endTime,
        }
      }).then((res)=>{
        console.log(res);
        this.yiZhan = res.data.data;
      }).catch((err)=>{})

    },

    //新增
    addyizhan(){
      this.axios.post("/courierStation/addCourierStation",{
        courierStationAddress: this.form.detailAddress,
        courierStationCity: this.address[1],
        courierStationCommunityId: this.yiZhan.id,
        courierStationDistrict: this.address[2],
        courierStationImage: "",
        courierStationName: this.form.name,
        courierStationProvince: this.address[0],
        courierStationCommunityName:this.form.age,
      }).then((res) => {
        this.yiZhan = res.data.data;
      }).catch(() => {})
      alert("添加成功");
      window.location.reload();
    },

    //获取省市
    getAllProvinceAndCityList() {

      // 获取全国所有省份和城市的列表
      var that = this;
      this.$http
      .get("https://restapi.amap.com/v3/config/district", {
        // 高德地图的API
        params: {
          key: "b1d31c19d90f91ff9f07aab5bbd5d9d1", // 这个是申请的 Key，读者自行写入
          keywords: "中国",
          subdistrict: 3,
          extensions: "base",
        },
      })
      .then((response) => {
        console.log(response.data)


        for(let i = 0;i<response.data.districts[0].districts.length;i++){
          let provinceMap = new Map();
          provinceMap.value = response.data.districts[0].districts[i].adcode;   //区域编号
          provinceMap.label = response.data.districts[0].districts[i].name;     //省名称
          provinceMap.children = [];
          that.addressAll.push(provinceMap);  //添加省份
          for(let j = 0;j < response.data.districts[0].districts[i].districts.length;j++){
            let cityMap = new Map()
            cityMap.value = response.data.districts[0].districts[i].districts[j].adcode;   //区域编号
            cityMap.label = response.data.districts[0].districts[i].districts[j].name;     //市名称
            cityMap.children = [];
            provinceMap.children.push(cityMap); //添加市
            for(let k = 0;k <response.data.districts[0].districts[i].districts[j].districts.length;k++){
              let areaMap = new Map()
              areaMap.value = response.data.districts[0].districts[i].districts[j].districts[k].adcode;   //区域编号
              areaMap.label = response.data.districts[0].districts[i].districts[j].districts[k].name;     //区县名称
              cityMap.children.push(areaMap);   //添加区县
            }
          }
        }
      });
    },

    // 上下架按钮
    liJiXiaJia(obj){
      if (obj.courierStationStatus == 1){
        obj.courierStationStatus = 0;
      }else {
        obj.courierStationStatus = 1;
      }
      this.axios.post('/courierStation/modifyCourierStation',{
        courierStationId:obj.courierStationId,
        courierStationStatus:obj.courierStationStatus,
      }).catch(()=>{
        //  请求数据
        this.axios.request('courierStation/querySearchCourierStationList',{
          params:{
            pageNum: '',
            pageSize: '',
            courierStationName: '',
            communityName: '',
            courierStationStatus: '',
            startTime: '',
            endTime: '',
          }
        }).then((res) => {
          this.yiZhan = res.data.data;
        }).catch((err) => {});
      }).catch((error)=>{
        console.log(error)})
    },

    //编辑小区
    clickBianJiXiaoQu(row){
        this.form.addTime = row.addTime;
        this.form.courierStationAddress =row.courierStationAddress;
        this.form.address = [row.courierStationProvince,row.courierStationCity,row.courierStationDistrict];
        this.form.courierStationCommunityId = row.courierStationCommunityId;
        this.form.courierStationCommunityName = row.courierStationCommunityName;
        this.form.courierStationId = row.courierStationId;
        this.form.courierStationImage = row.courierStationImage;
        this.form.courierStationName = row.courierStationName;
        this.form.courierStationOrderCount = row.courierStationOrderCount;
        this.form.courierStationSort = row.courierStationSort;
        this.form.courierStationStatus = row.courierStationStatus;

    },
    bianJiYiZhan(){
      this.axios.post("/courierStation/modifyCourierStation",{
        addTime: this.form.addTime,
        courierStationAddress: this.form.courierStationAddress,
        courierStationProvince: this.address[0],
        courierStationCity: this.address[1],
        courierStationDistrict: this.address[2],
        courierStationCommunityId: this.form.courierStationCommunityId,
        courierStationCommunityName: this.form.courierStationCommunityName,
        courierStationId: this.form.courierStationId,
        courierStationImage: this.form.courierStationImage,
        courierStationName: this.form.courierStationName,
        courierStationOrderCount: this.form.courierStationOrderCount,
        courierStationSort: this.form.courierStationSort,
        courierStationStatus: this.form.courierStationStatus,
      }).then((res) => {this.yiZhan = res.data.data;
      }).catch(() => { });
      alert("编辑成功");
      window.location.reload();
    },

    //换页
    handleCurrentChange(page){
      this.axios.request("courierStation/querySearchCourierStationList",{
        params:{
          pageNum:page,
          pageSize:'10',
          courierStationName:'',
          communityName:'',
          courierStationStatus:'',
          startTime:'',
          endTime:''
        }

      }).then((res)=>{
        this.yiZhan= res.data.data;

      }).catch((err)=>{})
    },





  },

}
</script>

<template>
<div class="yizhan">
  <div class="top">
    <span>驿站名称:&nbsp;&nbsp;</span>
    <el-input class="input1" v-model="input1" placeholder="请输入驿站名称"></el-input>
    <span style="margin-left: 25px;">小区名称:&nbsp;&nbsp;</span>
    <el-input class="input2" v-model="input2" placeholder="请输入小区名称"></el-input>
  </div>

  <div class="dataTime">
    <span class="demonstration">添加时间:&nbsp;&nbsp;</span>
    <el-date-picker class="block1"
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
    </el-date-picker>
    <el-button class="two" type="primary" @click="searchxiaoqu">搜索</el-button>
  </div>
<!-- 新增驿站-->
  <div class="tankuang">
    <el-button class="add" type="text" @click="dialogFormVisible = true">添加驿站</el-button>

    <el-dialog title="添加驿站" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="驿站名字" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入驿站名字"></el-input>
        </el-form-item>
        <el-form-item label="驿站图片" :label-width="formLabelWidth">
          <el-link href="https://www.baidu.com" target="_blank"><i class="el-icon-upload"></i></el-link>
        </el-form-item>
        <el-form-item label="所属地区" :label-width="formLabelWidth">
          <el-cascader :options="addressAll" clearable v-model="address" :props="{value:'label'}"></el-cascader>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth" >
          <el-input v-model="form.detailAddress" autocomplete="off" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="所属小区" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off" placeholder="请选择所属小区"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false,addyizhan()">确 定</el-button>
      </div>
    </el-dialog>
  </div>

<!--  编辑驿站-->
  <div>
    <el-dialog title="添加驿站" :visible.sync="dialogFormVisibleBianJi1">
      <el-form :model="form">
        <el-form-item label="驿站名字" :label-width="formLabelWidth">
          <el-input v-model="form.courierStationName" autocomplete="off" placeholder="请输入驿站名字"></el-input>
        </el-form-item>
        <el-form-item label="驿站图片" :label-width="formLabelWidth">
          <el-link href="https://www.baidu.com" target="_blank"><i class="el-icon-upload"></i></el-link>
        </el-form-item>
        <el-form-item label="所属地区" :label-width="formLabelWidth" :default-value="address">
          <el-cascader :options="addressAll" clearable v-model="form.address" :props="{value:'label'}"></el-cascader>
        </el-form-item>
        <el-form-item label="" :label-width="formLabelWidth" >
          <el-input v-model="form.courierStationCommunityName" autocomplete="off" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="所属小区" :label-width="formLabelWidth">
          <el-input v-model="form.courierStationAddress" autocomplete="off" placeholder="请选择所属小区"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisibleBianJi1 = false,bianJiYiZhan()">确 定</el-button>
      </div>
    </el-dialog>
  </div>


  <div class="content">
    <el-table
        :data="yiZhan.list"
        border
        :header-cell-style="{background:'#46a6ff','text-align':'center',color:'white'}"
        style="width:1250px ">
      <el-table-column
          fixed
          prop="courierStationId"
          label="ID"
          align="center"
          width="100">
      </el-table-column>
      <el-table-column
          prop="courierStationName"
          label="驿站名字"
          align="center"
          width="160">
      </el-table-column>
      <el-table-column
          prop="courierStationImage"
          label="驿站图片"
          align="center"
          width="150">
      </el-table-column>
      <el-table-column
          prop="courierStationAddress"
          label="驿站地址"
          align="center"
          width="160">
      </el-table-column>
      <el-table-column
          prop="courierStationCommunityName"
          label="所属小区"
          align="center"
          width="140">
      </el-table-column>
      <el-table-column
          prop="courierStationOrderCount"
          label="订单总数"
          align="center"
          width="130">
      </el-table-column>
      <el-table-column
          prop="addTime"
          label="添加时间"
          align="center"
          width="200">
      </el-table-column>
      <el-table-column
          prop="courierStationStatus"
          label="状态"
          align="center"
          width="110">
        <template slot-scope="scope">
          <span class="span1" v-if = "scope.row.courierStationStatus === 1" style="background-color: rgba(0,128,0,0.1); border: 1px solid rgba(0,255,0,0.5);">上架</span>
          <span class="span1" v-else-if = 'scope.row.courierStationStatus === 0' style="background-color: rgba(255,0,0,0.1); border: 1px solid rgba(255,0,0,0.4);">下架</span>
        </template>
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="90">
        <template slot-scope="scope">
          <el-button @click="liJiXiaJia(scope.row)" type="text" size="small">
            <span v-if="scope.row.courierStationStatus === 0">立即上架</span>
            <span v-else-if="scope.row.courierStationStatus === 1">立即下架</span>
          </el-button>
          <el-button type="text" size="small" @click="(dialogFormVisibleBianJi1 = true), clickBianJiXiaoQu(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <!--分页部分-->
  <div class="block">
    <el-pagination
        layout="prev, pager, next"
        :total=this.yiZhan.total
        @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</div>
</template>

<style scoped>
.top{
  display: inline-block;
}
.top span{
  margin-right: 5px;
}
.input1, .input2{
  width: 200px;
  margin-top: 20px;
}
.dataTime{
  margin-left: 25px;
  margin-top: 20px;
  display: inline-block;
}
.two{
  margin-left: 20px;
}
.tankuang .add {
  width: 100px;
  height: 40px;
  background-color: #1890FF;
  color: white;
  margin: 15px 0;
}
.span1{
  display: block;
  margin: 0 auto;
  width: 60px;
  padding: 3px 0;
  border-radius: 10%;
}
.block{
  height: 100px;
  margin: 20px 0;
}

</style>